<template>
  <div class="web-footer w-global-color-bg">
    <div class="w-content-box content w-flex-center">
      <div class="item">
        Phone：
        <a class="w-hover-text" href="tel:17620747824">17620747824</a>
        &nbsp;&nbsp;QQ：415461850 &nbsp;&nbsp;
        <a-popover>
          <template slot="content">
            <img slot="content" :src="weiXinImg" style="width: 200px" alt="" />
          </template>
          <span class="w-pointer">微信：wangwugangcun</span>
        </a-popover>
      </div>
      <p class="item w-pointer w-hover-text" @click="gongXinClick">
        豫ICP备17050274号
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({
  name: 'WebFooter'
})
export default class Com extends Vue {
  // 微信二维码
  weiXinImg = process.env.WECHAT_QRCODE

  // 跳转到工信部
  gongXinClick () {
    window.open(process.env.GONG_XIN_URL)
  }
}
</script>

<style lang="less" scoped>
.web-footer {
  > .content {
    height: 150px;
    flex-direction: column;
    > .item {
      font-size: 14px;
      color: #ccc;
      margin: 5px;
    }
  }
  a {
    color: #ccc;
  }
}
</style>
